<template>
  <div className="chinld">
    <h3>子组件</h3>
    <div>
      姓名：{{ chinldDataVmodel.name }}<br>
      年龄：{{ chinldDataVmodel.age }}<br>
      参数：{{ testNameParam }}
    </div>
    <input type="button" name="aa" @click="changeName" value="改名称">
    <input type="button" name="aa" @click="changeParam" value="改参数">
  </div>
</template>

<script setup>
const props = defineProps({
  chinldDataVmodel: {
    type: Object,
    default: {}
  },
  testNameParam: {
    type: String,
    default: ""
  },
})
const emit = defineEmits(['funChange', 'update:chinldDataVmodel', 'update:testNameParam'])
const changeName = () => {
  console.log(props.chinldDataVmodel)
  let tmp = props.chinldDataVmodel;
  tmp.name = 'vmodel-李四四'
  emit('update:chinldDataVmodel', tmp)
}
const changeParam = () => {
  console.log(props.testNameParam)
  let tmp = props.testNameParam
  tmp = "vmodel-第二参数值"
  emit('update:testNameParam', tmp)
}

/**
 * 声明一个事件
 * @param obj
 */
const childFuction = (obj) => {
  console.log('子组件事件', obj)
}
defineExpose({
  childFuction,
  props,
})
</script>

<style scoped>
.chinld {
  min-width: 200px;
  background: bisque;
}
</style>